<template>
<view class="step_wrapper">
    <view class="step_sec">
        <view class="title flex">
            <view>手机和密码设置</view>
            <view>2/2</view>
        </view>
        <view class="input_sec flex">
            <view>手机号码</view>
            <input @input="inputMobile" maxlength="11" placeholder="请输入手机号码" type="number">
        </view>
        <view class="input_sec flex">
            <view>图形验证</view>
            <input @input="inputCaptcha" class="mini_input"  placeholder="请输入图形验证码">
            <image @tap="initCaptcha" class="captcha" mode="scaleToFill" :src="captchaUrl"></image>
        </view>
        <view class="input_sec flex">
            <view>短信验证</view>
            <input @input="inputSms" class="mini_input" maxlength="10" placeholder="请输入短信验证码" type="number">
            <view @tap="sendSms" :class="'sms_btn' + (disabled?' disabled_btn':'')" maxlength="4">{{smsText}}</view>
        </view>
        <view class="input_sec flex">
            <view>设置密码</view>
            <input @input="inputPwd" maxlength="18" placeholder="请设置8-18位密码，不可为纯数字" type="password">
        </view>
        <view class="input_sec flex">
            <view>再次输入</view>
            <input @input="inputPwdAgain" maxlength="18" placeholder="请再次输入密码" type="password">
        </view>
    </view>
    <view @tap="submitReg" class="btn theme_btn">下一步</view>
    <view @tap="makePhoneCall" class="call">客服热线：400-0035-125</view>
</view>
</template>

<script>
	import {sendCode, validateCode} from '../../api/smsManage.js'
var t = require("../../utils/request.js"),
    a = require("../../utils/util.js"),
	config = require("../../utils/config.js").config,
    e = function (t) {
  return t && t.__esModule ? t : {
    default: t
  };
}(require("../../utils/api.js")),
    i = (getApp(), null),
    s = e.default.captchaData,
    n = e.default.mobileSend,
    o = e.default.mobileCode,
    d = e.default.registerVol,
    c = /^1([3-9])\d{9}$/,
    r = /^(?=.*\d)(?=.*[a-zA-Z]).{8,18}$/;

export default {
  data() {
    return {
      realname: "",
      idcardtypeVal: "",
      idcard: "",
      provinceId: "",
      cityId: "",
      countyId: "",
      mobile: "",
      captcha: "",
      sms: "",
      password: "",
      password2: "",
      count: 60,
      disabled: !1,
      captchaId: "",
      captchaUrl: "",
      smsText: "获取验证码"
    };
  },

  components: {},
  props: {},
  onLoad: function (t) {
    if (t.idcard && t.regProvince) {
      var a = t.realname,
          e = t.idcardType,
          i = t.idcard,
          s = t.regProvince,
          n = t.regCity,
          o = t.regCounty;
      this.setData({
        realname: a,
        idcardtypeVal: e,
        idcard: i,
        provinceId: s,
        cityId: n,
        countyId: o
      });
    }

    this.captchaRequest();
  },
  onReady: function () {},
  onShow: function () {},
  onHide: function () {},
  onUnload: function () {
    clearInterval(i);
  },
  onPullDownRefresh: function () {},
  onReachBottom: function () {},
  onShareAppMessage: function () {
    return {
      title: "让公益更生活 让生活更公益",
      path: "/pages/index/index",
      imageUrl: "/static/images/zyh_logo.jpg"
    };
  },
  methods: {
    inputMobile: function (t) {
      this.setData({
        mobile: t.detail.value
      });
    },
    inputCaptcha: function (t) {
      this.setData({
        captcha: t.detail.value
      });
    },
    inputSms: function (t) {
      this.setData({
        sms: t.detail.value
      });
    },
    inputPwd: function (t) {
      this.setData({
        password: t.detail.value
      });
    },
    inputPwdAgain: function (t) {
      this.setData({
        password2: t.detail.value
      });
    },
    initCaptcha: function () {
      this.captchaRequest();
    },
    sendSms: function () {
			if (!this.mobile || !c.test(this.mobile)) {
				uni.showToast({
				  title: "请输入有效的手机号码",
				  icon: "none"
				});
			} else if (!this.captcha) {
				uni.showToast({
				  title: "请输入图形验证码",
				  icon: "none"
				});
			} else {
				var t = this;
				var params = {
					'phone': this.mobile
				};
				sendCode(params).then(result => {
					if (result.success) {
						uni.showToast({
						  title: result.message,
						  icon: "none",
						  success: function () {
						    t.timeCount();
						  }
						});
					} else {
						uni.showToast({
						  title: result.message,
						  icon: "none"
						});
					}
				});
			}
    },
    timeCount: function () {
      var t = this,
          a = this.count;
      60 === a && (i = setInterval(function () {
        a > 0 ? (a--, t.setData({
          count: a,
          smsText: a + "s",
          disabled: !0
        })) : (a = 60, t.setData({
          count: a,
          smsText: "重新获取",
          disabled: !1
        }), clearInterval(i));
      }, 1e3));
    },
    submitReg: function () {
      var t = this;
			if (!this.mobile || !c.test(this.mobile)) {
				uni.showToast({
					title: "请输入有效的手机号码",
					icon: "none"
				});
			} else if (!this.captcha) {
				uni.showToast({
					title: "请输入图形验证码",
					icon: "none"
				});
			} else if (!this.sms) {
				uni.showToast({
					title: "请输入短信验证码",
					icon: "none"
				});
			} else if (!r.test(this.password) || !r.test(this.password2) || this.password !== this.password2) {
				uni.showToast({
					title: "请设置合规的密码",
					icon: "none"
				});
			} else if (!r.test(this.password2)) {
				uni.showToast({
					title: "请再次输入合规的密码",
					icon: "none"
				});
			} else if (this.password !== this.password2) {
				uni.showToast({
					title: "前后输入的密码不一致，请重新输入",
					icon: "none"
				});
			} else {
				t.regRequest();
			}
    },
    makePhoneCall: function () {
      uni.makePhoneCall({
        phoneNumber: "4000035125"
      });
    },
    captchaRequest: function () {
			this.captchaUrl = config.host + s + "?" + new Date().getTime();
    },
    regRequest: function () {
			var params = {
				phone: this.mobile,
				code: this.sms
			};
			
			validateCode(params).then(result => {
				if (result.success) {
					var regParams = {
					  data: {
					    api: d,
							cardType: this.idcardtypeVal,
							cardNum: this.idcard,
					    name: this.realname,
					    mobile: this.mobile,
							sysOrgId: this.countyId,
							password: this.password,
							captcha: this.captcha,
							code: this.sms,
					  }
					};
					(0, t.request)(regParams, "normal", !0).then(function(t){
						if (t.data.success) {
							uni.showModal({
								title: "",
								content: "恭喜您注册成功，欢迎加入志愿者的大家庭！",
								showCancel: !1,
								confirmText: "去登录",
								confirmColor: "#24CBA9",
								success: function (t) {
									t.confirm && uni.redirectTo({
										url: "/pages/entry/login"
									});
								}
					    });
					  } else {
							uni.showToast({
								title: t.data.message,
								icon: "none"
							});
						}
					});
				} else {
					uni.showToast({
					  title: result.message,
					  icon: "none"
					})
				}
			});
      
    }
  }
};
</script>
<style>
page {
    position: relative;
}

.step_wrapper,page {
    width: 100%;
    height: 100%;
}

.step_wrapper {
    background: #f4f4f4;
}

.step_sec {
    width: 100%;
    height: auto;
    background: #fff;
}

.title {
    justify-content: space-between;
    padding: 60rpx 30rpx;
    font-size: 44rpx;
    font-weight: 500;
}

.title view:last-child {
    font-size: 30rpx;
    font-weight: 400;
    color: #999;
}

.extend {
    width: 100%;
    height: 94rpx;
    line-height: 94rpx;
    padding-left: 30rpx;
    font-size: 28rpx;
    color: #333;
}

.extend view {
    display: inline-block;
    color: #108ee9;
}

.btn {
    width: 690rpx;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    border-radius: 44rpx;
    font-size: 30rpx;
    margin: 60rpx auto 40rpx;
}

.input_sec .captcha {
    position: absolute;
    top: 50%;
    right: 30rpx;
    z-index: 11;
    transform: translateY(-50%);
    width: 188rpx;
    height: 80rpx;
    border: 1rpx solid #e1e2e3;
}

.input_sec input.mini_input {
    flex: 0 0 300rpx;
    width: 300rpx;
}

.input_sec .sms_btn {
    position: absolute;
    top: 50%;
    right: 30rpx;
    transform: translateY(-50%);
    z-index: 11;
    width: 164rpx;
    height: 56rpx;
    line-height: 56rpx;
    background: #24cba9;
    text-align: center;
    font-size: 26rpx;
    color: #fff;
    text-align-last: unset;
}

.input_sec .picker {
    flex: auto;
    max-width: 400rpx;
    height: 110rpx;
    padding: 0 12rpx;
    font-size: 30rpx;
    color: #333;
}

.input_sec .picker .area,.input_sec .picker .type {
    width: 100%;
    height: 100%;
    color: #333;
    text-align-last: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.input_sec .picker .area.placeholder,.input_sec .picker .type.placeholder {
    color: #999;
}
</style>